import React, {useEffect, useState} from "react";
import {Checkbox, Col, Drawer, Form, Input, Radio, Row, Tree} from "antd";
import {
    PermissionTreeProp,
    RoleKeyValueProp,
    UserDetailProp,
    UserInfoDrawerProp
} from "@/pages/authority/modules";
import {allRole} from "@/api/role";
import {permissionTree} from "@/api/permission";
import {getUserDetail} from "@/api/user";



const UserInfoDrawer: React.FC<UserInfoDrawerProp> = ({visible, userId, close}) => {

    const [roles, setRoles] = useState<RoleKeyValueProp[]>([]);
    const [treeData, setTreeData] = useState<PermissionTreeProp[]>([]);
    const [userDetail, setUserDetail] = useState<UserDetailProp>({} as UserDetailProp);
    const [form] = Form.useForm<UserDetailProp>();

    const initLoad = async () => {
        const roles = await allRole()
        const tree = await permissionTree(0, true);
        const detail = await getUserDetail(userId!);
        setRoles(roles);
        setTreeData(tree);
        setUserDetail(detail);
        form.setFieldsValue({...detail});
    }

    useEffect( () => {
        if (visible) {
            initLoad()
        }
        return () => {
            setRoles([]);
            setTreeData([]);
        }
    }, [visible])


    return <Drawer title="用户详情"
                   placement="right"
                   onClose={close}
                   open={visible}>
        <Form labelCol={{ span: 4 }}
              wrapperCol={{ span: 20 }}
              form={form}
              layout="horizontal"
              name="form_in_modal"
        >
            <Form.Item name="id" label="用户ID" style={{display: 'none'}}><Input /></Form.Item>
            <Form.Item name="name" label="账号" rules={[{ required: true, message: '请输入账号' }]}>
                <Input placeholder="请输入账号" readOnly />
            </Form.Item>
            <Form.Item name="phone" label="手机">
                <Input placeholder="请输入手机号" readOnly />
            </Form.Item>
            <Form.Item name="email" label="邮箱" rules={[{ required: true, message: '请输入邮箱' }]}>
                <Input placeholder="请输入邮箱" readOnly />
            </Form.Item>
            <Form.Item name="sex" label="性别">
                <Radio.Group>
                    <Radio key={1} value={1}> 男 </Radio>
                    <Radio key={0} value={0}> 女 </Radio>
                </Radio.Group>
            </Form.Item>
            <Form.Item name="desc" label="备注">
                <Input.TextArea rows={3} placeholder="请输入用户备注" readOnly />
            </Form.Item>
            <Form.Item name="userStatus" label="状态" initialValue={userDetail.userStatus}>
                <Radio.Group>
                    <Radio key={0} value={0}> 不可用 </Radio>
                    <Radio key={1} value={1}> 可用 </Radio>
                    <Radio key={2} value={2}> 禁用 </Radio>
                </Radio.Group>
            </Form.Item>
            <Form.Item name="roleIds" label="角色" initialValue={userDetail.roleIds}>
                <Checkbox.Group style={{ width: '100%' }}>
                    <Row>
                        {roles.map(item => <Col span={8}>
                            <Checkbox
                                key={item.value}
                                value={item.value}
                                style={{ lineHeight: '32px' }}>{item.label}</Checkbox>
                        </Col>)}
                    </Row>
                </Checkbox.Group>
            </Form.Item>
            <Form.Item name="permIds" label="资源权限" >
                <Tree
                    style={{marginTop: 5}}
                    checkable
                    treeData={treeData}
                    defaultExpandAll
                    checkedKeys={userDetail.permIds}
                />
            </Form.Item>
        </Form>
    </Drawer>
}

export default UserInfoDrawer;